Using Css transitions with JavaScript is awesome. You can declare a transition in css, then trigger it with a javascript event or just plain javascript. Let's say I wanted to transition the width of a div. The transition property is the width, the duration is 0.6s, the timing function is ease-out & the delay is 1s.

In the javascript, I would change the width of the div & the transition would play when the browser is reloaded.

You can trigger transitions on javascript events. You can click the div & trigger the transition.

Let's say we have two transitions we want to trigger on click. The width & the background color. We would declare both transitions in the css code.

Then with javascript, specify what we want the properties new values to be on click.

You don't have to click the element that the transition is on to trigger the transition. You can click a completely different element for any transition you want to do. Let's say we have a button with the div we were using before.

When I click the button, the width & the background color of the div will transition.

This can make for some really cool transitions. The best part is it's surprisingly easy. This is an example project.